6.3 How to make a dropdown menu?

Motivations
- Try the above example, CV with drop down menu.

Read all in How to Create a Dropdown Menu in HTML and CSS.
How to convert the next nested list to a dropdown menu?
There are three levels in this example. The first level - Home, About, Courses. The second level - E.g., Courses: Web Design & Development, Advanced Web Programming, and Web-based Information System. The third level - E.g., Advanced Web Programming: 'JavaScript, jQuery, Bootstrap', PHP, MySQL, .MVC, SPA'.
- Home
- About
- Courses
  - Web Design & Development
    - HTML
    - CSS
    - JavaScript
  - Advanced Web Programming
    - JavaScript, jQuey, Bootstrap
    - PHP
    - MySQL
    - MVC, SPA
  - Web-based Information System
- Contact
Here is an example dropdown menu for the above list items.
- The first level menu items are displayed in a line.
- The second level menu items are displayed right below their first level menu item.
- The third level menu items are displayed at the right side of their second level menu item.
- Home
- About
- Courses
  - Web Design & Development
    - HTML
    - CSS
    - JavaScript
  - Advanced Web Programming
    - JavaScript, jQuey, Bootstrap
    - PHP
    - MySQL
    - MVC, SPA
  - Web-based Information System
- Contact
How to make the above dropdown menu? a) Let's start by wrapping the menu lists within a div element. b) Make the first level items inline elements so that they can be displayed in the same line. c) Make the background color change when the mouse moves over each item. d) Make the 2nd level items not be displayed.
- Home
- About
- Courses
  - Web Design & Development
    - HTML
    - CSS
    - JavaScript
  - Advanced Web Programming
  - Web-based Information System
- Contact
Trial 1: Let's make the first level menu items 'inline'. Let's also make the 2nd level and the 3rd level menu items not displayed. Let's also delete all the bullets. Can you put some space between menu items? Can you give background-color? Different background-color when the mouse hovers.
<style> div.t1-ddm > ul { padding:???; list-style-type:???; } div.t1-ddm > ul > li { display:???; padding:10px; background-color:LightGrey; } div.t1-ddm > ul > li > ul { display:???; padding:???; list-style-type:???; } div.t1-ddm > ul > li > ul > li > ul { display:???; padding:???; list-style-type:???; } div.t1-ddm > ul > li:??? { background-color:LightBlue; } </style> <div class='t1-ddm'> <ul> <li>Home</li> <li>About</li> <li>Courses <ul> <li>Web Design & Development <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> ??? ??? <li>Advanced Web Programming</li> <li>Web-based Information System</li> </ul> ??? <li>Contact</li> </ul> </div>
Let's make the 2nd level items be displayed when its first level item is hovered.
- Home
- About
- Courses
  - Web Design & Development
    - HTML
    - CSS
    - JavaScript
  - Advanced Web Programming
  - Web-based Information System
- Contact
Trial 2: Let's try the above exercise. The 2nd level menu should be displayed right below the 1st level menu item. How to decide the position of the 2nd level menu? You also need to delete the bullets.
<style> div.t2-ddm > ul { padding:0; list-style-type:none; } div.t2-ddm > ul > li { display:inline; padding:10px; background-color:LightGrey; } div.t2-ddm > ul > li > ul { display:none; padding:0; list-style-type:none; } div.t2-ddm > ul > li > ul > li > ul { display:none; padding:0; list-style-type:none; } div.t2-ddm > ul > li:hover { background-color:LightBlue; } div.t2-ddm > ul > li { position: ???; } div.t2-ddm > ul > li > ul { position: ???; top:???; left:0; } div.t2-ddm > ul > li > ul > li { background-color:LightGrey; } div.t2-ddm > ul > li:??? > ul { display: ???; } </style> <div class='t2-ddm'> <ul> <li>Home</li> <li>About</li> <li>Courses <ul> <li>Web Design & Development <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>Advanced Web Programming</li> <li>Web-based Information System</li> </ul> </li> <li>Contact</li> </ul> </div>
a) Make the background color of the 2nd level item change when the mouse moves over each item. b) Make the 3rd level items not be displayed.
- Home
- About
- Courses
  - Web Design & Development
    - HTML
    - CSS
    - JavaScript
  - Advanced Web Programming
  - Web-based Information System
- Contact
Trial 3: Let's give background-color. Different background-color when the mouse hovers.
<style> div.t3-ddm > ul { padding:0; list-style-type:none; } div.t3-ddm > ul > li { display:inline; padding:10px; background-color:LightGrey; } div.t3-ddm > ul > li > ul { display:none; padding:0; list-style-type:none; } div.t3-ddm > ul > li > ul > li > ul { display:none; padding:0; list-style-type:none; } div.t3-ddm > ul > li:hover { background-color:LightBlue; } div.t3-ddm > ul > li { position: relative; } div.t3-ddm > ul > li > ul { position: absolute; top:100%; left:0; } div.t3-ddm > ul > li > ul > li { background-color:LightGrey; } div.t3-ddm > ul > li:hover > ul { display: block; } div.t3-ddm > ul > li > ul > li:??? { background-color:LightBlue; } </style> <div class='t3-ddm'> <ul> <li>Home</li> <li>About</li> <li>Courses <ul> <li>Web Design & Development <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>Advanced Web Programming</li> <li>Web-based Information System</li> </ul> </li> <li>Contact</li> </ul> </div>
Make the 3rd level items be displayed when the mouse moves over a 2nd level item. Make the background color of the 3rd level item change when the mouse moves over each item.
- Home
- About
- Courses
  - Web Design & Development
    - HTML
    - CSS
    - JavaScript
  - Advanced Web Programming
  - Web-based Information System
- Contact
Trial 4: Let's try the above exercise. The 3rd level menu must be displayed at the exact right side of the 2nd menu item.
<style> div.t4-ddm > ul { padding:0; list-style-type:none; } div.t4-ddm > ul > li { display:inline; padding:10px; background-color:LightGrey; } div.t4-ddm > ul > li > ul { display:none; padding:0; list-style-type:none; } div.t4-ddm > ul > li > ul > li > ul { display:none; padding:0; list-style-type:none; } div.t4-ddm > ul > li:hover { background-color:LightBlue; } div.t4-ddm > ul > li { position: relative; } div.t4-ddm > ul > li > ul { position: absolute; top:100%; left:0; list-style-type:none; } div.t4-ddm > ul > li > ul > li { background-color:LightGrey; } div.t4-ddm > ul > li:hover > ul { display: block; } div.t4-ddm > ul > li > ul > li:hover { background-color:LightBlue; } div.t4-ddm > ul > li > ul > li { position: ???; } div.t4-ddm > ul > li > ul > li > ul { position: ???; top:???; left:???; } div.t4-ddm > ul > li > ul > li:??? > ??? { display:???; } div.t4-ddm > ul > li > ul > li > ul > li { background-color:LightGrey; } div.t4-ddm > ul > li > ul > li > ul > li:??? { background-color:LightBlue; } </style> <div class='t4-ddm'> <ul> <li>Home</li> <li>About</li> <li>Courses <ul> <li>Web Design & Development <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>Advanced Web Programming</li> <li>Web-based Information System</li> </ul> </li> <li>Contact</li> </ul> </div>
Can you convert the next nested list to a dropdown menu?
- COMP2680
  - HTML
    - w3Schools.com
    - CS.TRU.CA
  - CSS
  - JavaScript
- COMP3540
  - JavaScript
  - PHP
  - MySQL
- COMP4620
  - JavaScript
  - MongoDB
  - Advanced Topics
Lab 7.
- Read Simple CV - VII
- Let's complete w7_cv.html using Notepad++, and execute the web appllication by double-clicking it.
- tiger.jpg
- menu_icon.png
- Here is the solution for your study.

Learning outcomes

6.3 How to make a dropdown nenu